<form action="" class="form-horizontal" role="form">
  <div id="attribute-container">
    <volist name="productClass.attributes" id="vo">
    <div class="form-group">
      <div class="row col-sm-offset-1">
        
        <div class="col-sm-2">
          <div class="input-group">
            <span class="input-group-addon">属性名称</span>
            <input type="text" class="form-control" name="name" placeholder="" value="{$vo.name}">
          </div>
        </div>
        
        <div class="col-sm-5">
          <div class="input-group">
            <span class="input-group-addon">属性值</span>
            <input type="text" class="form-control" name="values" placeholder="" value="{$vo.values}">
          </div>
        </div>
        
        <div class='col-sm-1'>
        	<div class='input-group'>
        		<label><input type='checkbox' name='multiselect' placeholder='' value='1' {$vo['multiselect']?"checked='checked'":""}>多选</label>
        	</div>
        </div>
        
        <div class='col-sm-1'>
        	<div class='input-group'>
        		<label><input type='checkbox' name='is_standard' placeholder='' value='1' {$vo['is_standard']?"checked='checked'":""}>规格</label>
        	</div>
        </div>
        <input type="hidden" name="id" value="{$vo.id}"/>
        
      </div>
    </div>
    </volist>
  </div>
  
  <div class="form-group" id="btn">
    <div class="col-sm-offset-1 col-sm-8">   
      <a class="btn btn-default" id="add-form-group">添加一列</a>
      <a class="btn btn-info" id="inherit-parent">继承父类</a>
      <button class="btn btn-primary" type="submit" id="submit-post">保存更改</button>
    </div>
  </div>
</form>

<script type="text/javascript">
  $(function(){
    
    //添加一列
    $("#add-form-group").click(function(){
      var html = "<div class='form-group'>"
                 +"<div class='row col-sm-offset-1'>"
                 +"<div class='col-sm-2'><div class='input-group'><span class='input-group-addon'>属性名称</span><input type='text' class='form-control' name='name' placeholder='' value=''></div></div>"
                 +"<div class='col-sm-5'><div class='input-group'><span class='input-group-addon'>属性值</span><input type='text' class='form-control' name='values' placeholder='' value=''></div></div>"
                 +"</div></div>";
      $( html ).insertBefore( $("#btn") );
    });
    
    //提交
    $("#submit-post").click(function(){
      var _this = this,
          classId = {$_GET['id']};
      var data = getData();
      
      $.post("__CONTROLLER__/modifyAttributePost", {"class_id": classId, "data": data}, function(data){
        if ( data.error == 0 ) {
          $().alertMsg({"type": "success", "msg": data.msg}); 
        } else {
          $().alertMsg({"type": "error", "msg": data.msg});
        }
      },"json");
      
    });
    
    //继承父类
    var inheritParent = false;
    $("#inherit-parent").click(function(){
    	if ( inheritParent ) { return; }
      var classId = {$_GET['id']};
      $.post("__CONTROLLER__/extendAttributesPost", {"class_id": classId}, function(data){
    	  var arr = data.extra,
    	       html = "";
    	  for(var i=0, obj; obj=arr[i]; i++) {
    		  html += "<div class='form-group'>"
                  +"<div class='row col-sm-offset-1'>"
                  +"<div class='col-sm-2'><div class='input-group'><span class='input-group-addon'>属性名称</span><input type='text' class='form-control' name='name' placeholder='' value='"+ obj.name +"'></div></div>"
                  +"<div class='col-sm-5'><div class='input-group'><span class='input-group-addon'>属性值</span><input type='text' class='form-control' name='values' placeholder='' value='"+ obj.values +"'></div></div>"
                  +"<div class='col-sm-1'><div class='input-group'><span class='input-group-addon'>多选</span><input type='checkbox' class='form-control' name='multiselect' placeholder='' value='1' "+ (obj.multiselect?"checked='checked'":"") +" ></div></div>"
                  +"<div class='col-sm-1'><div class='input-group'><span class='input-group-addon'>规格</span><input type='checkbox' class='form-control' name='is_standard' placeholder='' value='1' "+ (obj.is_standard?"checked='checked'":"") +" ></div></div>"
                  +"</div></div>";
    	  }
    	  $( "#attribute-container" ).html( html );
    	  inheritParent = true;
      });
    });
    
    //拼接类目属性键值对
    function getData() {
    	
      var nameArray = [], valuesArray = [], idArray = [], multiselectArray = [], is_standard = [],
          data = [];
    
      $(".form-horizontal input[name='name']").each(function(){
        nameArray.push( $(this).val() );
      });
      
      $(".form-horizontal input[name='values']").each(function(){
        valuesArray.push( $(this).val() );
      });
      
      $(".form-horizontal input[name='id']").each(function(){
        idArray.push( $(this).val() );
      });
      
      $(".form-horizontal input[name='multiselect']").each(function() {
    	  multiselectArray.push( $(this).get(0).checked ? $(this).val() : 0 );
      });
      
      $(".form-horizontal input[name='is_standard']").each(function() {
    	  is_standard.push( $(this).get(0).checked ? $(this).val() : 0 );
      });
      
      for( var i=0, len=nameArray.length; i<len; i++) {
        var obj = {};
        obj['name'] = nameArray[i];
        obj['values'] = valuesArray[i];
        obj['id'] = idArray[i];
        obj['multiselect'] = multiselectArray[i];
        obj['is_standard'] = is_standard[i];
        data.push( obj );
      }
      return data;
    };
    
  })
</script>